<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy birthday!</title>
    <link rel="stylesheet" href="./chengrui.css">
    <link rel='stylesheet' href='splitting.css'>
    <link rel='stylesheet' href='splitting-cells.css'>
</head>

<body>
    <!-- 页面1   登录页面 -->
    <div id="page1" class="page1">
        <div class="load_div">
            <p id="account" class="account">账号：</p>
            <input id="account_input" placeholder="请输入用户名" class="account_input">
            <br>
            <p id="password" class="password">密码：</p>
            <input type="password" id="password_input" placeholder="请输入密码" class="password_input">
            <button type="button" id="load" onclick="cake_run()" class="btn btn1">进入</button>
            <div class="container">
                <div class="presents">
                    <div class="present orange">
                        <div class="lid"></div>
                        <div class="box"></div>
                        <div class="bow"></div>
                        <div class="ribbon"></div>
                    </div>
                    <div class="present blue">
                        <div class="lid"></div>
                        <div class="box"></div>
                        <div class="bow"></div>
                        <div class="ribbon"></div>
                    </div>
                    <div class="present green">
                        <div class="lid"></div>
                        <div class="box"></div>
                        <div class="bow"></div>
                        <div class="ribbon"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 亮火柴 -->
    <div class="match">
        <span class="glow" id="glow"></span>
        <span class="flames" id="flames"></span>
    </div>

    <!-- 页面2   Happy birthday页面 -->
    <div id="page2" class="page2">
        <div id="confettis" class="confettis">
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
        </div>
        <div class="wrapper">
            <div class="sayHello">
                <div class="greeting">Happy Birthday</div>
                <div class="greetingToName">To 梁思淇</div>
            </div>
            <div class="plate">
                <div class="cake-wrap">
                    <div class="cake-topping">
                        <div class="topping-top">
                            <div class="candle-container">
                                <div class="star"></div>
                                <div class="star"></div>
                                <div class="star"></div>
                                <div class="star"></div>
                                <div class="star"></div>
                                <div class="candle-wrap">
                                    <div class="flame-wrap" id="flame-wrap"></div>
                                    <div class="light_candle" id="light_candle"></div>
                                    <div class="candle-base">
                                        <div class="candle-top"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="topping-front">
                            <div class="top-layer"></div>
                            <div class="bottom-layer"></div>
                        </div>
                    </div>
                    <div class="cake-base">
                        <div class="base-front"></div>
                        <div class="base-top"></div>
                    </div>

                </div>
            </div>
        </div>

        <svg class="svg">
            <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
                <path
                    d="M0,0 V0.481 s0.021,0.37,0.078,0.404 s0.035,-0.296,0.102,-0.27 s0.007,0.363,0.096,0.354 s0.028,-0.466,0.1,-0.487 S0.406,0.999,0.457,0.999 s0.03,-0.502,0.075,-0.518 s0.041,0.488,0.081,0.274 c0.007,-0.038,0.021,-0.187,0.044,-0.215 c0.014,-0.017,0.038,0.401,0.075,0.392 s0.023,-0.28,0.074,-0.392 c0.022,-0.04,0.072,0.359,0.1,0.344 c0.057,-0.029,0.094,-0.405,0.094,-0.405 V-0.001">
                </path>
            </clipPath>
            <clipPath id="my-flame-path" clipPathUnits="objectBoundingBox">
                <path
                    d="M0.501,0 s0.188,0.101,0.295,0.238 s0.123,0.15,0.169,0.286 S1,0.74,0.928,0.838 S0.711,1,0.501,1 S0.216,0.937,0.09,0.838 s-0.083,-0.149,0,-0.29 s0.23,-0.139,0.333,-0.276 S0.501,0,0.501,0">
                </path>
            </clipPath>
            <clipPath id="my-star-path" clipPathUnits="objectBoundingBox">
                <path
                    d="M0.5,0.846 l-0.309,0.154,0.044,-0.357 L0,0.382 l0.336,-0.067 L0.5,0 l0.164,0.315,0.336,0.067,-0.235,0.261,0.044,0.357">
                </path>
            </clipPath>
        </svg>
        <!-- partial -->
    </div>


</body>
<script src='mo.min.js'></script>
<script src='splitting.min.js'></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src='gsap.min.js'></script>
<script src="./chengrui.js"></script>

</html>